<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function()
    {
        //全选按钮
        //点击按钮后，四个选项框全部勾选

        //为id为checkedAllBtn的按钮绑定一个单击响应函数
        var checkedAllBtn=document.getElementById("checkedAllBtn");
        checkedAllBtn.onclick=function()
        {
            //设置四个选项框在点击之后变成选中状态
            //先获取四个选项框
            var items=document.getElementsByName("items");
            console.log(items.length);

            //获取到四个选项框后，再去遍历得到的items
            for(var i=0;i<items.length;i++)
            {
                //设置四个选项框变成选中状态
                //通过选项框的checked属性可以获取或者设置多选框的一个选中状态
                items[i].checked=true;
                console.log(items[i].checked);
            }
        };

        //反选按钮
        //点击按钮后，四个选项框全部勾选

        //为id为checkedNoBtn的按钮绑定一个单击响应函数
        var checkedNoBtn=document.getElementById("checkedNoBtn");
        checkedNoBtn.onclick=function()
        {
            //设置四个选项框在点击之后变成取消选中状态
            //先获取四个选项框
            var items=document.getElementsByName("items");
            console.log(items.length);

            //获取到四个选项框后，再去遍历得到的items
            for(var i=0;i<items.length;i++)
            {
                //设置四个选项框变成取消选中状态
                //通过选项框的checked属性可以获取或者设置多选框的一个取消选中状态
                items[i].checked=false;
                console.log(items[i].checked);
            }
        };

        //为id为checkedRevBtn的按钮绑定一个单击响应函数
        var checkedRevBtn=document.getElementById("checkedRevBtn");
        checkedRevBtn.onclick=function()
        {
            //设置四个选项框在点击之后变成取消选中状态
            //先获取四个选项框
            var items=document.getElementsByName("items");
            console.log(items.length);

            //获取到四个选项框后，再去遍历得到的items
            for(var i=0;i<items.length;i++)
            {
                //设置四个选项框从选种状态变成取消选中，从取消选中状态变成选中状态
                //通过选项框的checked属性可以获取或者设置多选框的一个取消选中状态或者选中状态
                /*
                if(items[i].checked == true)
                {
                    items[i].checked=false;
                }
                else
                {
                    items[i].checked=true;
                }
                console.log(items[i].checked);*/

                //此方法代码相对麻烦，可以使用取反
                items[i].checked=!items[i].checked;
            }
            
        };

        //提交按钮，点击按钮以后，将所有选中的多选框的value的属性值弹出
        //为id为sendBtn的按钮绑定单击响应函数
        var sendBtn=document.getElementById("sendBtn");
        sendBtn.onclick=function()
        {
            var items=document.getElementsByName("items");
            console.log(items.length);
            //遍历items
            for(var i=0;i<items.length;i++)
            {
                if(items[i].checked==true)
                {
                    alert(items[i].value);
                }
            }
        };

        //全选/全不选多选框
        //当他选中时，其余的也全选中，当他取消时，其余的也全部取消
        //为checkedAllBox绑定单击响应函数
        var checkedAllBox=document.getElementById("checkedAllBox");
        checkedAllBox.onclick=function()
        {
            var items=document.getElementsByName("items");
            console.log(items.length);
            for(var i=0;i<items.length;i++)
            {
                items[i].checked=this.checked;//this可以用来表示当前对象，所以this.checked效果跟checkedAllBox.checked效果一样
                console.log(items[i].checked);
            }

        }

    };
    </script>
</head>
<body>
     <form method="post" action="">
         你爱好的运动是？<input type="checkbox" id="checkedAllBox">全选/全不选
         <br>
         <input type="checkbox" name="items" value="足球">足球
         <input type="checkbox" name="items" value="篮球">篮球
         <input type="checkbox" name="items" value="羽毛球">羽毛球
         <input type="checkbox" name="items" value="乒乓球">乒乓球
         <br>
         <input type="button" id="checkedAllBtn" value="全  选">
         <input type="button" id="checkedNoBtn" value="全不选">
         <input type="button" id="checkedRevBtn" value="反  选">
         <input type="button" id="sendBtn" value="提  交">
     </form>
</body>
</html>